<template>
	<view class="home">
		<view class="item" @click="takePhoto">
			<image class="img" src="/static/take-photo.svg" mode="aspectFit"></image>
			<view>拍照取件</view>
		</view>
		<view class="item" @click="goToSearchPage">
			<image class="img" src="/static/search.svg" mode="aspectFit"></image>
			<view>查取货号</view>
		</view>
		<view class="item">
			<image class="img" src="/static/record.svg" mode="aspectFit"></image>
			<view>遗失登记</view>
		</view>
		<view class="item">
			<image class="img" src="/static/go-send.svg" mode="aspectFit"></image>
			<view>上门寄件</view>
		</view>
		<view class="item">
			<image class="img" src="/static/coupon.svg" mode="aspectFit"></image>
			<view>代取件查看</view>
		</view>
	</view>
</template>

<script setup>
	export default {
		methods:{
			takePhoto(){
				const input = document.createElement('input');
				input.type='file';
				input.accept='image/*';
				input.capture='camera';
				input.onchange=(event)=>{
					const file = event.target.files[0];
					console.log('拍照文件',file);
				};
				input.click();
			}
		},
		methods:{
			goToSearchPage(){
				this.$router.push('/pages/serarchResult/serarchResult')
			}
		}
	}
</script>

<style lang="scss">
	.home {
		padding-top: 10px;
		display: flex;
		flex-wrap: wrap;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;
			height: 80px;
			padding: 8px;
			font-size: $uni-font-size-lg;
			.img {
				width: 50px;
				height: 40px;
			}
		}
	}
</style>